<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="login-container">
    <view class="login-box">
      <view class="logo">
        <image src="/static/logo.png" mode="aspectFit" />
      </view>
      <view class="title">欢迎登录</view>
      <view class="form">
        <wd-input v-model="form.account" placeholder="请输入用户名" clearable prefix-icon="user" />
        <wd-input
          v-model="form.password"
          type="text"
          password
          placeholder="请输入密码"
          clearable
          prefix-icon="keywords"
        />
        <wd-button type="primary" block @click="handleLogin" :loading="loading">登录</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Login } from '@/service/index/login'
import { useUserStore } from '../../store/user'
const { LoginInfo, isLogined } = useUserStore()
const router = useRouter()
const loading = ref(false)

const form = ref({
  account: '',
  password: '',
})

const handleLogin = async () => {
  if (!form.value.account || !form.value.password) {
    uni.showToast({
      title: '请输入用户名和密码',
      icon: 'none',
    })
    return
  }
  loading.value = true
  try {
    // 调用登录接口
    await LoginInfo(form.value)
    console.log('isLogined', isLogined)
    if (!isLogined) {
      uni.showToast({
        title: '登录失败',
        icon: 'error',
      })
      return
    }
    // 登录成功后跳转到首页
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } catch (error) {
    uni.showToast({
      title: '登录失败',
      icon: 'error',
    })
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 40px 30px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.logo {
  margin-bottom: 20px;
  text-align: center;

  image {
    width: 80px;
    height: 80px;
  }
}

.title {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;

  :deep(.wd-input) {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
  }

  :deep(.wd-button) {
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }
}
</style>
